<template>
  <div>

    <el-row>
      <el-form
          inline
          label-position="left"
      >

        <!-- 黑广播种类 -->
        <el-form-item
            label="黑广播种类">
          <Select
              :flushFlag="resettingFlag"
              @SelectChange="blackBoardcategoryChange"
              :options="categoryOption"
          ></Select>

        </el-form-item>

        <!-- 上报设备 -->
        <el-form-item
            label="上报设备">
          <Select
              :flushFlag="resettingFlag"
              @SelectChange="mobileChange"
              :options="mobileOption"
          ></Select>
        </el-form-item>

        <!-- 搜索频点 -->
        <el-form-item
            label="搜索频点">
          <el-input
              style="width: 175px"
              size="mini"
              @input="freqChange"
              v-model="freq"
              placeholder="请输入频点"></el-input>
        </el-form-item>

      </el-form>
    </el-row>

    <el-row>
      <el-form inline>

        <!-- 开始时间 -->
        <el-form-item label="开始时间">
          <el-date-picker
              size="mini"
              style="width: 175px"
              v-model="startTime"
              type="datetime"
              placeholder="选择开始时间"
              default-time="12:00:00"
              @change="timeRangeChange(1)"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 结束时间 -->
        <el-form-item label="结束时间">
          <el-date-picker
              size="mini"
              style="width: 175px"
              v-model="endTime"
              type="datetime"
              placeholder="选择结束时间"
              default-time="12:00:00"
              @change="timeRangeChange(2)"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
              size="mini"
              type="primary"
              @click="submitForm"
          >查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
// --------------- element-ui ---------------------
import Select from "../../../../../components/element-ui/elSelect"
// ------------- axios ---------------------
import {getBlackBoardInfo} from "../../../../../api/blackboard";

export default {
  components: {
    Select
  },
  data() {
    return {
      //  ----------- 查询表单 --------------
      resettingFlag: false, // 重置查询条件标识
      category: undefined,
      mobile: undefined,
      freq: undefined,
      startTime: undefined,
      endTime: undefined,
      timeRange: ["", ""],
      //  ------------ 查询项相关 ----------------
      categoryOption: [
        {
          value: 0,
          label: "全部"
        }, {
          value: 1,
          label: "未知"
        },
        {
          value: 2,
          label: "假药"
        }, {
          value: 3,
          label: "虚假信息"
        },
        {
          value: 4,
          label: "政治反动"
        }, {
          value: 5,
          label: "恐怖主义"
        },
        {
          value: 6,
          label: "淫秽色情"
        }
      ],
      mobileOption: [
        {value: 0, label: "全部"},
      ],
    }
  },
  props: {
    Reset: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    Reset: function () {
      this.resettingSelectOption()
    }
  },
  created() {
    this.getBlackBoardInfo();
  },
  methods: {
    // ------------- axios ----------------
    /**
     * 下拉框选项
     * */
    getBlackBoardInfo: function () {
      getBlackBoardInfo()
          .then(res => {
            this.mobileOption = res.data.data.mobile;
          })
    },
    // -------------- 查询功能 --------------

    /**
     * 重置查询条件
     * */
    resettingSelectOption: function () {
      this.category = undefined;
      this.mobile = undefined;
      this.freq = undefined;
      this.startTime = undefined;
      this.endTime = undefined;
      this.resettingFlag = !this.resettingFlag;
    },

    /**
     * 黑广播类型发生变化
     * @param val
     */
    blackBoardcategoryChange: function (val) {
      this.category = val;
    },

    /**
     * 上报设备发生变化
     * @param val
     */
    mobileChange: function (val) {
      this.mobile = val;
    },

    /**
     * 频点发生变化
     */
    freqChange: function (val) {
      this.freq = val;
    },

    /**
     * 时间范围查询条件
     */
    timeRangeChange: function (index) {
      if (this.startTime === undefined || this.endTime === undefined) {
        return 0
      }
      let s_obj = new Date(this.startTime);
      let e_obj = new Date(this.endTime);
      if (s_obj.getTime() >= e_obj.getTime() && this.endTime !== undefined && this.endTime !== null) {
        this.$message("开始时间必须早于结束时间!");
        switch (index) {
          case 1:
            this.startTime = undefined;
            break;
          case 2:
            this.endTime = undefined;
            break;
          default:
            break;
        }
        return 0
      }
    },

    /**
     * 提交表单进行查询
     */
    submitForm: function () {
      const pd = {
        category: this.category === 0 ? undefined : this.category,
        mobile: this.mobile === 0 ? undefined : this.mobile,
        freq: this.freq === "" ? undefined : this.freq,
        's_time': this.formatTime(this.startTime),
        'e_time': this.formatTime(this.endTime),
      }
      this.$emit("selectChange", pd);
    },
    /**
     * 格式化时间
     * @param time
     * @returns {string}
     */
    formatTime: function (time) {
      if (time === undefined || time === null) {
        return undefined
      }
      let date = new Date(time)
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
    }
  }
}
</script>

<style>

.el-form {
  text-align: left;
}

.el-form-item {
  margin-left: 1.5vw;
}
</style>